<template>
  <div class="help">
    <!-- 搜索条件 -->
    <el-row :gutter="20" class="help-queryInfo">
      <!-- 搜索框 -->
      <el-form :model="searchForm" style="padding-left: 1%;">
        <el-input v-model="searchForm.keyword" clearable placeholder="标签名称"
            style="width: 16%;margin-left: 1%;"></el-input>
        <el-date-picker v-model="searchForm.time"
            end-placeholder="结束日期"
            range-separator="至"
            start-placeholder="开始日期"
            style="margin-left: 1%;"
            type="datetimerange"
            value-format="yyyy-MM-dd HH:mm"
        >
        </el-date-picker>
        <el-button icon="el-icon-search" style="margin-left: 1%;margin-top: 1%;margin-bottom: 1%;" type="primary"
            @click="searchOrder">搜索
        </el-button>

        <el-button icon="el-icon-search" style="margin-left: 10%;margin-top: 1%;margin-bottom: 1%;" type="primary"
            @click="toEdit(0)">新增标签
        </el-button>
      </el-form>
    </el-row>
    <!-- 检索结果 -->
    <el-row :gutter="20" class="help-list">
      <el-col :span="24">
        <el-table
            :data="label"
            border
            size='small'
            style="width: 100%">
          <el-table-column
              label="id"
              prop="id"
              width="70">
          </el-table-column>
          <el-table-column
              label="标签名称"
              prop="label"
              min-width="170">
          </el-table-column>
          <el-table-column
              label="是否私密"
              prop="isSecret"
              min-width="100"
              v-slot="scope">
            <el-switch
                v-model="switchList[scope.$index].switchValue"
                active-text="私密"
                inactive-text="公开"
                @change="handleStatusChange($event, scope.row)">
            </el-switch>
          </el-table-column>
          <el-table-column
              label="更新时间"
              prop="updateTime"
              min-width="170"
              v-slot="scope">
              {{ parseTime(scope.row.updateTime ) }}
          </el-table-column>
          <el-table-column
              label="创建时间"
              prop="createTime"
              min-width="170"
              v-slot="scope">
              {{ parseTime(scope.row.createTime ) }}
          </el-table-column>
          <el-table-column min-width="170" fixed="right" label="操作" v-slot="{row}">
              <el-button size="small" type="primary" @click="toEdit(row)">编辑</el-button>
              <el-button size="small" type="danger" @click="toDelete(row)">删除</el-button>
          </el-table-column>
        </el-table>
      </el-col>
    </el-row>

    <!-- 分页 -->
    <el-row :gutter="20" class="help-list">
      <el-col :span="24" class="help-page-box">
        <el-pagination
            :current-page="queryInfo.cur"
            :page-size="queryInfo.size"
            :page-sizes="[10, 30, 50, 100]"
            :total="total"
            background
            layout="total, sizes, prev, pager, next, jumper"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
        >
        </el-pagination>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import {parseTime} from "../../utils/date";
import {secret} from "@/utils/enum";

export default {
  data() {
    return {
      isSecure: {
        PUBLIC: false,
        PRIVATE: true
      },
      switchValue: false,
      secret: secret,
      classify: 0,
      // 搜索
      searchForm: {
        time: '',
        keyword: '',
      },
      // 分类查询参数
      queryInfo: {
        cur: 1, // 当前页
        size: 10, // 条目
        categories: '所有标签' // 标签名
      },
      // 文章列表
      label: [],
      switchList: [],
      total: 0,
    }
  },
  methods: {
    parseTime,
    // 根据条件查询
    async toSearch() {
      let startTime = "2000-01-01 01:01"
      let endTime = "2999-12-31 23:59"
      if (this.searchForm.time !== '' && this.searchForm.time !== null) {
        startTime = this.searchForm.time[0]
        endTime = this.searchForm.time[1]
      }
      const {data: res} = await this.$http.get('/admin/label/list', {
        params: {
          startTime: Date.parse(startTime)/1000,
          endTime: Date.parse(endTime)/1000,
          key: this.searchForm.keyword,
          page: this.queryInfo.cur,
          size: this.queryInfo.size
        }
      }, {
        emulateJSON: true
      })
      // 标签列表赋值
      this.label = res.content
      this.switchList = []
      this.label.forEach(value=>{
        this.switchList.push({
          switchValue: value.isSecret !== 'PUBLIC'
        })
      })
      this.total = res.totalElements
    },
    // 点击查询按钮
    searchOrder() {
      this.queryInfo.cur = 1
      this.toSearch()
    },
    toEdit(e) {
      let that = this
      let param = {}
      if (e !== 0) {
        param.id = e.id
        param.secret = e.isSecret
      } else {
        param.secret = "PUBLIC"
      }
      layer.prompt({title: '添加/编辑标签', value: e.label}, function(value, index){
        param.name = value
        //点击确定的操作(调用接口)
        that.$http.post('/admin/label/save', param).then(res => {
          that.$message({
            message: '标签已成功添加/编辑！',
            type: 'success'
          });
          that.toSearch();
        });
        layer.close(index);
      });
    },
    // 监听 size 改变的事件
    handleSizeChange(newSize) {
      this.queryInfo.size = newSize
      this.toSearch()
    },
    // 监听 cur 页码值 改变的事件
    handleCurrentChange(newCur) {
      this.queryInfo.cur = newCur
      this.toSearch()
    },
    // 删除评论
    toDelete(row) {
      const that = this;
      this.$confirm('是否确认删除该标签?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        //点击确定的操作(调用接口)
        that.$http.get('/admin/label/delete', {params: {id: row.id}}, {
          emulateJSON: true
        }).then(res => {
          let temp = {}
          if (res.data === "成功") {
            temp.message = '标签已成功删除！'
            temp.type = 'success'
          } else {
            temp.message = res.data
            temp.type = 'error'
          }
          that.$message({
            message: temp.message,
            type: temp.type
          });
          that.toSearch();
        });
      }).catch(() => {
        //几点取消的提示
      });
    },
    //获取当前时间
    getFormatDate() {
      let nowDate = new Date();
      let year = nowDate.getFullYear();
      let month = nowDate.getMonth() + 1 < 10 ? "0" + (nowDate.getMonth() + 1) : nowDate.getMonth() + 1;
      let date = nowDate.getDate() < 10 ? "0" + nowDate.getDate() : nowDate.getDate();
      let hour = nowDate.getHours() < 10 ? "0" + nowDate.getHours() : nowDate.getHours();
      let minute = nowDate.getMinutes() < 10 ? "0" + nowDate.getMinutes() : nowDate.getMinutes();
      return year + "-" + month + "-" + date + " " + hour + ":" + minute;
    },
    handleStatusChange(data, row) {
      let param = {}
      param.id = row.id
      param.name = row.label
      if (!data) {
        param.secret = "PUBLIC"
      } else {
        param.secret = "PRIVATE"
      }
      this.$http.post('/admin/label/save', param).then(res => {
        this.$message({
          message: '标签已成功添加/编辑！',
          type: 'success'
        });
      });
    }
  },
  created() {
    this.queryInfo.categories = '所有评论'
    this.toSearch()
  }
}
</script>

<style>
.help {
  width: 100%;
  min-height: 100%;
  padding: 15px;
  box-sizing: border-box;
}

/* 搜索 */
.help-queryInfo {
  margin-bottom: 10px;
}

.help-queryInfo-li {
  width: 100%;
  height: auto;
}

/* 列表 */
.help-list {
  width: 100%;
  height: auto;
  margin-bottom: 20px;
}

/* 分页 */
.help-page-box {
  width: 100%;
  height: auto;
  display: flex;
  justify-content: flex-end;
}

.el-pagination__total {
  color: aliceblue;
}

.el-pagination__jump {
  color: aliceblue;
}
</style>
